<template>
  <div class="container">
	<h1 class="help-title">猪爸爸帮助中心</h1>
	<h3 class="small-title">关于猪爸爸的帮助内容</h3>
	<div class="btn-box">
		<router-link tag="button" to="/help/detail" class="button">快速上手</router-link>
	</div>
	<div class="card-box">
		<el-row :gutter="26" style="width: 100%;margin: 0;">
			<el-col :span="24" :md="8">
				<div class="card-item">
					<img :src="img1" class="help-icon"/>
					<div class="card-tight">
						<h5>优势</h5>
						<p>大量专业老师为您的宝贝起名，实现多对一服务，起个自己满意的名字</p>
					</div>
				</div>
			</el-col>
			<el-col :span="24" :md="8">
				<div class="card-item">
					<img :src="img2"  class="help-icon"/>
					<div class="card-tight">
						<h5>快捷</h5>
						<p>提供多种起名工具，快速起名，节省您的起名时间，提高起名效率</p>
					</div>
				</div>
			</el-col>
			<el-col :span="24" :md="8">
				<div class="card-item">
					<img :src="img3"  class="help-icon"/>
					<div class="card-tight">
						<h5>清晰</h5>
						<p>起名智能判断，全部采用AI智能分析，为你起名提供更方便服务</p>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
  </div>
</template>

<script>
	import img1 from "@/assets/images/help1.png"
	import img2 from "@/assets/images/help2.png"
	import img3 from "@/assets/images/help3.png"
  export default{
    data() {
      return{
		img1,
		img2,
		img3
      }
    },
    methods:{

    }
  }
</script>

<style scoped>
	.card-tight p{
		width:224px;
		height:35px;
		font-size:14px;
		font-family:SourceHanSansCN;
		font-weight:600;
		color:rgba(103,103,103,1);
		line-height:21px;
	}
	.card-tight h5{
		width:42px;
		height:20px;
		font-size:21px;
		font-family:SourceHanSansCN;
		font-weight:600;
		color:rgba(26,26,26,1);
	}
	.card-tight{
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 23px;
		padding: 13px 0;
	}
	.help-icon{
		width: 54px;
		flex: 0 1 54px;
	}
	.card-item:hover{
		transform: translateY(-10%);
	}
	.card-item{
		width:100%;
		height:140px;
		cursor: default;
		transition: all .2s ease;
		background:rgba(255,255,255,1);
		box-shadow:0px 4px 12px 0px rgba(64,92,218,0.12);
		border-radius:4px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20px;
	}
	.card-box{
		width: 100%;
		margin-bottom: 186px;
	}
	@media screen and (max-width:450px) {
		.card-box{
			width: 100%;
			margin-bottom: 56px;
		}
	}
	.help-title{
		margin: 73px auto 25px;
		text-align: center;
		font-size:39px;
		font-family:Source Han Sans CN;
		font-weight:600;
		color:rgba(26,26,26,1);
	}
	.small-title{
		font-size:21px;
		font-family:SourceHanSansCN;
		font-weight:400;
		color:rgba(168,172,188,1);
		text-align: center;
		margin-bottom: 26px;
	}
	.button{
		width:158px;
		height:53px;
		text-align: center;
		line-height: 53px;
		background:rgba(64,92,218,1);
		border-radius:3px;
		font-size:16px;
		font-family:SourceHanSansCN;
		font-weight:400;
		color:rgba(255,255,255,1);
		border: none;
		cursor: pointer;
		transition: all .1s ease-in;
	}
	.button:hover{
		background:rgba(64,92,218,0.8);
	}
	.btn-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 70px;
	}
	button::after{
		border: none;
	}
</style>
